.packageIGameCurrencyRecharge {
  width: 100%;
  height: 100vh;
  background: #f7f6f6;
  // padding: 40px 32px;

  .flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .topFirst {
    // padding: 100px 32px;
    width: 100vw;

    .topBg {
      width: 100%;
    }

    &-con {
      position: absolute;
      top: 92px;
      left: 32px;
      right: 32px;
    }

    &-left {
      &-label {
        font-size: 24px;
        font-weight: 400;
        color: #ffffff;
      }

      &-value {
        font-size: 52px;
        font-weight: 600;
        color: #ffffff;
        margin-left: 20px;
        margin-right: 10px;
      }
    }

    .icon {
      width: 48px;
    }
  }

  .flexCenter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .con {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-top: -230px;
    position: relative;
    overflow: hidden;
    // align-items: center;

    &-list {
      padding: 32px;
      height: calc(100% - 270px);
      margin-bottom: 40px;
      overflow-y: auto;

      .active {
        background: #f7fbff;
        border-radius: 20px;
        border: 4px solid #a685fa;
      }

      &-item {
        width: 211px;
        height: 178px;
        background: #ffffff;
        border-radius: 20px;
        border: 3px solid #eaeaea;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;

        .rechargeBox {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-bottom: 40px;

          .icon {
            width: 48px;
            margin-left: 4px;
          }

          .text {
            height: 74px;
            font-size: 52px;
            font-weight: 600;
            color: #a685fa;
            line-height: 74px;
          }
        }

        .moneyBox,
        .money {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
        }

        .text1 {
          font-size: 24px;
          font-weight: 400;
          color: #a685fa;
        }

        .text2 {
          font-size: 32px;
          font-weight: 600;
          color: #a685fa;
        }

        .text3 {
          font-size: 24px;
          font-weight: 400;
          color: #999999;
          text-decoration: line-through;
          margin-left: 12px;
        }
      }
    }

    .submitBtn {
      width: 686px;
      height: 88px;
      line-height: 88px;
      background: linear-gradient(140deg, #ab8bfb 0%, #91b9e9 100%);
      border-radius: 48px;
      text-align: center;
      color: #ffffff;
      position: absolute;
      bottom: 126px;
      align-items: center;
      margin-left: calc((100% - 686px) / 2);
    }
  }
}
